<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/ ">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--主体内容-->
    <el-card>
      <!--搜索框与按钮-->
      <el-row :gutter="20">
        <el-col span="8">
          <el-input placeholder="请输入内容" @input="val=>change(val)" clearable v-model="queryInfo.serachInfo">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        :data="pages.data"
        border
        stripe
        style="width: 100%">
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column
          prop="uname"
          align="center"
          label="商家名称">
        </el-table-column>
        <el-table-column
          prop="cname"
          align="center"
          label="公司名称">
        </el-table-column>
        <el-table-column
          prop="shopname"
          align="center"
          label="店铺名称">
        </el-table-column>
        <el-table-column
          label="营业执照"
          align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.image1" style="height: 75px;width: 75px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="法人代表"
          align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.image2" style="height: 75px;width: 75px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="danger" v-if="scope.row.status===0">未通过</el-tag>
              <el-tag size="medium" type="success" v-if="scope.row.status===1">已通过</el-tag>
              <el-tag size="medium" type="warning" v-if="scope.row.status===2">申请中</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="190" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" size="mini" @click="successCheck(scope.$index,scope.row)">
              通过
            </el-button>
            <el-button type="danger" icon="el-icon-close" size="mini" @click="errorCheck(scope.row)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.pageTotal">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdList',
  data () {
    return {
      queryInfo: {
        currentPage: 1,
        serachInfo: '',
        pageSize: 10,
      },
      pages: {
        pageTotal: 20,
        data: []
      }
    }
  },
  created () {
    this.getShopInfo()
  },
  methods: {
    // 获取表格信息
    async getShopInfo () {
      const { data: res } = await axios.get('/getShopInfo', { params: this.queryInfo })
      if (res.status === 200) {
        if (res.data === null) {
          this.pages.pageTotal = 0
          this.pages.data = []
          return false
        }
        this.pages.pageTotal = res.data.pageTotal
        this.pages.data = res.data.list
        return false
      }
      this.$message.error(res.message)
    },
    // 通过
    successCheck (index, row) {
      row.status = 1
      axios.patch('/updateStatusToSuccess/' + row.id).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.message)
          this.getShopInfo()
          return
        }
        this.$message.error(res.data.message)
      }).catch(err => {
        this.$message.error('服务器未响应')
      })
    },
    // 拒绝
    errorCheck (row) {
      row.status = 0
      axios.patch('/updateStatusToSuccess0/' + row.id).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.message)
          this.getShopInfo()
          return
        }
        this.$message.error(res.data.message)
      }).catch(err => {
        this.$message.error('服务器未响应')
      })
    },
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getShopInfo()
    },
    handleCurrentChange (val) {
      this.queryInfo.currentPage = val
      this.getShopInfo()
    },
    change (val) {
      this.queryInfo.serachInfo = val
      this.getShopInfo()
    }
  }
}
</script>

<style scoped>

</style>
